<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		createSheet();
		setInitHeader();
		doAction('search');
	});

	function createSheet() {
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var sheet_init = {};
		sheet_init.Cfg = {FrozenCol:0,SearchMode:smLazyLoad,Page:30};
	}
	
	function setInitHeader() {
		var headers 	= [{Text:"NO|상태|삭제|문자열|콤보|콤보에디트|팝업|팝업에디트|자동합계|자동평균|정수|실수|날짜|패스워드|체크박스|라디오", Align:"Center"}];
		var info		= {	Sort: $("#sort option:selected").val(),	ColMove: 0, ColResize: 0, HeaderCheck: 0};
		mySheet.InitHeaders(headers, info);
		setInitColumns();		// 헤더 생성 후, 컬럼 설정
	}
	
	function setInitColumns() {
		var col = [
					{Type:"Seq", Align:"Right", VAlign:"Middle"},
					{Type:"Status", Align:"Center"},
					{Type:"DelCheck"},
					{Type:"Text", KeyField:1, Align:"Center"},
					{Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
					{Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
					{Type:"Popup", Width:100},
					{Type:"PopupEdit", Width:100},
					{Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
					{Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
					{Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
					{Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
					{Type:"Date", Align:"Center", Format:"Ymd", Width:100},
					{Type:"Pass", Hidden:1},
					{Type:"CheckBox"},
					{Type:"Radio"}
		          ];
		
		mySheet.InitColumns(col);
		
		mySheet.FitColWidth();
	}
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
				
			case "init":		//초기화
				mySheet.Reset();
				createSheet();
				setInitHeader();
				doAction('search');
				break;
		}
	}

	function setColumnSort() {
		var col = $('#idxCol').val();
		var sort = $('#sort').val();
		
		mySheet.ColumnSort(col, "DESC", sort, 1);
	}
	
</script>
<title>헤더 클릭 순서에 따른 소팅/역소팅 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">헤더 클릭 순서에 따른 소팅/역소팅 예제</div>
	<div id="desc">
		ColSort 인자는 값을 공백으로 설정하면 모든 컬럼이 Sort 인자에 설정된 소트 방향 순서로 소트되고, 각 컬럼별로 소트 방향을 달리 설정할 때 사용한다.<br> 
        KeepColOrder 인자는 Col 인자에 설정된 컬럼이 소트되는 순서를 의미하는것으로 인자값이 0 인 경우 컬럼 인덱스 순서로 소트되고, 인자값이 1인 경우 설정된 컬럼 순서 그대로 소트된다. 이 인자의 기본값을 0 이다.
	</div>
	<div id="functionArea">
		<span>
			선택한 컬럼 :
			<input type="text" id="idxCol" value="3|4|5" />,
			정렬 방법 : 
			<input type="text" id="sort" value="ASC|DESC|ASC" />
			<input type="button" value="적용하기" onClick="setColumnSort()">
		</span>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>